@import 'package:jaspr_pad/scss/colors';
@import 'package:jaspr_pad/scss/layout';
@import 'package:jaspr_pad/scss/shared';
@import 'package:jaspr_pad/scss/variables';

// Material Design Web theme colors. Must be imported before importing
// material-components-web.scss.
$mdc-theme-primary: #168afd;
$mdc-theme-on-primary: #0e161f;
$mdc-theme-secondary: #676767;
$mdc-theme-background: $playground-header-background-color;
$mdc-theme-surface: $playground-header-background-color;
$mdc-theme-error: $dark-red;

// Layout constants
$doc-console-padding: 8px 24px 8px 24px;

@import 'package:mdc_web/material-components-web';
@import 'shared';

body {
  background-color: $playground-background-color;
  color: $playground-text-color;
  font-family: $normal-font;
  font-size: 14px;
  overflow: hidden;
  @include layout-vertical;
  @include layout-fit;
}

header {
  background-color: $playground-header-background-color;
  height: 48px;
  padding-left: 24px;
  @include layout-center;
  z-index: 4;
  user-select: none;

  .header-title {
    @include layout;
    @include layout-center;
    font-family: $google-sans;
    font-weight: 400;
    font-size: 16pt;
    margin-right: 8px;

    img.logo {
      height: 24px;
      margin-right: 8px;
    }
  }

  .header-actions {
    @include layout-flex;
    @include layout-horizontal;
    @include layout-center-justified;
    flex-shrink: 0 !important;
  }

  #header-name-holder {
    @include layout-flex;
    @include layout-horizontal;
    @include layout-center-justified;
    @include layout-wrap;
    font-size: 14pt;
    margin-left: 1em;
    margin-right: 1em;
    user-select: none;
    flex-shrink: 1;
  }

  .header-gist-name {
    /*@include layout-flex;
    @include layout-horizontal;
    @include layout-center-justified;*/
    font-size: 14pt;
    text-overflow: ellipsis;
    /* not sure if this is better ? but for long names you can at least see and edit them)
    /*white-space: pre-wrap;*/
    margin-left: 1em;
    margin-right: 1em;
    user-select: none;
  }
}

section.main-section {
  @include layout-flex;
  @include layout;
  @include layout-relative;

  .panels {
    @include layout;
    @include layout-fit;
  }
}

body>footer {
  background-color: $playground-footer-background-color;
  @include layout-horizontal;
  @include layout-center;
  padding: 8px 24px;
  .flex {
    @include layout-flex;
  }

  .footer-item {
    margin-right: 14px;
  }

  * {
    margin-right: 4px;
  }
}


a {
  color: $playground-link-color;
  fill: $playground-text-color;

  &:visited {
    color: $playground-link-color;
    fill: $playground-link-color;
  }

  &:hover {
    color: $playground-text-color;
    fill: $playground-text-color;
  }
}

// Splitter
.gutter {
  background-color: $dark-gutter-background-color;
  background-repeat: no-repeat;
  background-position: 50%;
  margin-left: 0;
  margin-right: 0;
}

.gutter.gutter-horizontal {
  background-repeat: repeat-y;
  cursor: col-resize;
  height: 100%;
}

.gutter.gutter-vertical {
  background-repeat: repeat-x;
  cursor: row-resize;
  width: 100%;
}

// Editor panel
#editor-panel {
  @include layout-vertical;
  @include layout-relative;
}

#editor-panel-header {
  border-bottom: 1px solid $dark-gutter-background-color;
}

#editor-host {
  @include layout-flex;
  @include layout-relative;
  margin: 8px 0 0 0;
  padding: 0 8px;

  .CodeMirror {
    @include layout-fit;
    height: 100%;
    font-family: $editor-font;
    font-size: $playground-editor-font-size;
  }
}

.header {
  @include layout-horizontal;
  @include layout-justified;
  @include layout-center;
  padding: 4px;
  height: 48px;

}

.button-group {
  @include layout-horizontal;
  @include layout-center;
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 24px 0 0;
  z-index: 5;
}

// Console

#output-panel {
  @include layout-flex;
  @include layout-vertical;
  @include layout-relative;

  // Constrain the width of #console-panel
  width: 0;

  iframe {
    @include layout-flex;
    border: none;
  }
}

#right-output-panel {
  @include layout;
  @include layout-vertical;
  @include layout-relative;

  #right-output-panel-content {
    @include layout-flex;
  }
}

#right-doc-panel {
  @include layout;
  @include layout-vertical;
  #right-doc-panel-content {
    @include layout-flex;
  }
}

#right-output-panel .view-label {
  width: 100%;
}

#right-console-clear-button {
  float: right;
  margin-right: 10px;
  margin-top: -8px;
}

.console {
  @include layout-flex;
  font-family: $editor-font;
  font-size: 14px;
  line-height: 20px;
  min-height: 50px;
  overflow: auto;
  white-space: pre-wrap;
  padding: $doc-console-padding;

  .normal {
    color: $dark-editor-text;
  }

  .error-output {
    color: $dark-pink;
  }

  .ansi-bold	{ font-weight: bold; }
  .ansi-italic	{ font-style: italic; }
  .ansi-underline { text-decoration: underline;  text-decoration-style:solid; }
  .ansi-dim	{ opacity: 0.5; }
  .ansi-hidden { opacity: 0; }
  .ansi-blink { animation: code-blink-key 0.3s cubic-bezier(1, 0, 0, 1) infinite alternate; }
  .ansi-rapid-blink { animation: code-blink-key 0.01s cubic-bezier(1, 0, 0, 1) infinite alternate; }
  @keyframes code-blink-key {
    to { opacity: 0; }
  }
  .ansi-double-underline { text-decoration: underline;  text-decoration-style:double; }
  .ansi-strike-through { text-decoration:line-through;  text-decoration-style:solid; }
  .ansi-overline { text-decoration:overline;  text-decoration-style:solid; }
  .ansi-overline.code-underline.code-line-through { text-decoration: overline underline line-through; text-decoration-style:solid; }
  .ansi-overline.code-underline { text-decoration: overline underline; text-decoration-style:solid; }
  .ansi-overline.code-line-through { text-decoration: overline line-through; text-decoration-style:solid; }
  .ansi-underline.code-line-through { text-decoration: underline line-through; text-decoration-style:solid; }
  .ansi-overline.code-double-underline.code-line-through { text-decoration: overline underline line-through; text-decoration-style:double; }
  .ansi-overline.code-double-underline { text-decoration: overline underline; text-decoration-style:double; }
  .ansi-double-underline.code-line-through { text-decoration: underline line-through; text-decoration-style:double; }
  .ansi-subscript { vertical-align: sub; font-size: smaller; line-height: normal; }
  .ansi-superscript { vertical-align: super; font-size: smaller; line-height: normal; }

  .ansi-font-1 { font-family: Verdana,Arial,sans-serif; }
  .ansi-font-2 { font-family: Georgia,'Times New Roman',serif; }
  .ansi-font-3 { font-family: Papyrus,Impact,fantasy; }
  .ansi-font-4 { font-family: 'Cascadia Mono', 'Apple Chancery','Lucida Calligraphy',cursive; }
  .ansi-font-5 { font-family: 'Courier New', 'Courier', monospace; }
  .ansi-font-6 { font-size: 14px; font-family: 'Cascadia Code PL', 'Segoe WPC', 'Segoe UI',-apple-system, BlinkMacSystemFont, system-ui, "Ubuntu", "Droid Sans", sans-serif; }
  .ansi-font-7 { font-size: 16px; font-family: 'Cascadia Mono PL', Menlo, Monaco, Consolas,"Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback"; }
  .ansi-font-8 { font-size: 18px; font-family: 'Cascadia Code PL',"SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; }
  .ansi-font-9 { font-size: 20px; font-family: 'JetBrains Mono', "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; }
  .ansi-font-10 { font-stretch: ultra-expanded; font-weight: bold; font-family: 'League Mono', 'F25 BlackletterTypewriter', UnifrakturCook, Luminari, Apple Chancery, fantasy, Papyrus; }
}

// Splash

.splash {
  background: $playground-background-color;
  pointer-events: none;

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  z-index: 1000;
  opacity: 1;

  transition: opacity .1s linear;
  -webkit-transition: opacity .1s linear;
}

.splash.hide {
  opacity: 0;
}

// Contenteditable elements
[contenteditable]:focus {
  outline: 0 solid transparent;
}

// Analysis flashes
.flash {
  background-color: $dark-flash-info-color;
}

// Issues
#issues {
  background-color: $dark-issues-background-color;
  border: 8px solid $dark-issues-background-color;
}

.issue .issuelabel {
  color: $dark-issue-label-color;
}

.issue:hover {
  background-color: darken($dark-issues-background-color, 3%);
}

.issue .message {
  color: $dark-issue-label-color;
}

#issues-toggle, .issue-anchor {
  color: $mdc-theme-primary;
  margin-right: 0;
  &:visited {
    color: $mdc-theme-primary;
  }

  &:hover {
    color: darken($mdc-theme-primary, 12%);
  }
}

#issues-message {
  @include footer-item-right;
  font-family: $normal-font;
  font-size: $playground-editor-font-size;
  cursor: default;
}


// Make the dialog show up even without everything initialized (for localStorage check)
.mdc-dialog {
  z-index: 1000;
}

#new-pad-dialog {
  @include mdc-dialog-content-ink-color(white, 1.0);

  .mdc-dialog__content {
    @include layout-horizontal;
    @include layout-start;
    @include layout-around-justified;
  }

  .divider {
    width: 1px;
    height: 200px;
    background-color: #2e3742;
  }

  .dart-container {
    @include layout-vertical;
    @include layout-center;
  }

  .select-project-button {
    cursor: pointer;
    margin: 8px;
    padding: 8px;
    border-radius: 8px;
    &:hover {
      background-color: lighten($dark-code-background-color, 12%);
    }
    &.selected{
      background-color: lighten($dark-code-background-color, 6%);
    }
    @include layout-vertical;
    @include layout-center;
    img {
      width: auto;
      max-height: 120px;
      margin-bottom: 16px;
    }
  }
}

#keyboard-dialog {

  #vim-switch-container {
    margin-top: 24px;
    border-top: 1px $dark-blue solid;
    padding-top: 10px;
    border-bottom: 1px $dark-blue solid;
    padding-bottom: 10px;
  }

  label[for=vim-switch] {
    margin-left: 18px;
  }
}

#samples-menu .mdc-list-item__graphic {
    height: auto;
    width: 20px;
    margin-right: 14px;
}

#github-menu-button {
  display: inline-block;
  background: url('../pictures/github_icon.svg') center no-repeat;
  background-size: 24px 24px;
  width: 32px;
  height: 32px;
  padding: 4px 4px;
  filter: invert(100%);
  margin-left: 8px;
  opacity: .5;
}

#github-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
}
#github-avatar[src] {
  outline: grey 1px solid;
  filter: invert(100%);
}

.channel-item {
  display: list-item;
  height: auto;
}

.mdc-list-item__title {
  font-weight: bold;
  margin-bottom: 0;
}

p.mdc-list-item__details {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
}

// Editor Tabs
.editor-tab {
  @include mdc-button-ink-color($button-text-color);
  color: $button-text-color;
  &.active {
    color: $dark-blue;
  }
}

.border-top {
  border-top: 6px solid $dark-gutter-background-color !important;
}

#editor-panel-close-button {
  @include mdc-icon-button-size(16px, 16px, 8px);
}

// Tabs
.mdc-tab {
  @include mdc-tab-text-label-color($dark-tab-color);
  @include mdc-tab-active-text-label-color($dark-tab-color-active);
  @include mdc-tab-indicator-underline-color($dark-tab-color-active);
}

// responsive layout
@media screen and (max-width: 850px) {
  #new-button {
    display: none;
  }

  #format-button {
    display: none;
  }

  #keyboard-button {
    display: none;
  }

  #install-button {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .header-gist-name {
    display: none !important;
  }
}

// Labels
.view-label {
  color: $dark-label-color;
}

// Scrollbars
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: $dark-scrollbar-color;
}

.custom-scrollbar::-webkit-scrollbar-corner { background: transparent; }

// Misc
.hide {
  opacity: 0;
}

.mdc-switch {
  @include mdc-switch-toggled-on-color($button-color);
  @include mdc-switch-toggled-off-color($secondary-color);
}

.muted {
  font-size: 0.8em;
  font-style: italic;
}
